{extend name="main"}
{block name="style"}
{css href="__PLUGIN_SRC__/Swiper/swiper-bundle.min.css"}
{css href="__PLUGIN_SRC__/Swiper/animate.min.css"}
<style type="text/css">
    .pc-show{display: block;}
    .mobile-show{display: none;}
    .header{
        height: 647px;
        background-image: url(__TEMPLATE_STATIC__/img/header_bg.png);
        background-position: center;
        background-size: 1920px 647px;
        background-repeat: no-repeat;
        background-color: #1686f2;
    }
    .opacity-7{opacity: .7}
    .opacity-3{opacity: .3}
    .down-btn{
        color: #FFFFFF !important;
        border: solid 1px #FFFFFF;
        background-color: rgba(255, 255, 255, .2);
        border-radius: 5px;
        padding: 6px 12px;
    }
    .down-btn.down-not{
        opacity: .7;
    }
    .down-btn-blue{
        color: #FFFFFF !important;
        background-color: #048CFC;
        border-radius: 5px;
        padding: 6px 12px;
    }
    .down-btn-blue.down-blue-not{
        background-color: #A6ABBE;
    }
    .down-qrcode-bg{
        width: 293px;
        height: 268px;
        background-image: url(__TEMPLATE_STATIC__/img/down-qrcode-bg.png);
        background-size: 100% 100%;
        position: absolute;
        left: -35px;
        bottom: -118px;
    }
    .text-A6ABBE{color: #A6ABBE;}
    .text-4E5470{color: #4E5470;}
    .bg-F6F6F8{background-color: #F6F6F8;}
    .swiper-button-next,.swiper-button-prev{
        background-color: #FFFFFF;
        color: #A6ABBE;
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }
    .swiper-button-next:after, .swiper-button-prev:after{
        font-size: 1rem;
    }
    .el-divider__text{background-color: #F6F6F8;color: #4E5470;font-size: 2.5rem;font-weight: bold;}
    .mobile-bg{
        background-image: url(__TEMPLATE_STATIC__/img/mobile-bg.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        min-height: 570px;
    }
    @media (max-width: 576px){
        .pc-show{display: none;}
        .mobile-show{display: block;}
    }
</style>
{/block}
{block name="header"}
<div class="pc-show bg-white">
    {include file="module/top_nav"/}
</div>
{/block}
{block name="body"}
<div class="pc-show">
    <div class="header text-white wrap">
        <div class="flex1"></div>
        <div class="container-xl pb-5 flex flex-center">
            <div class="flex-1 text-center">
                <h1>求职更轻松 · 招聘更简单</h1>
                <h5 class="opacity-7 py-3">全新UI体验 , 轻轻松松找工作</h5>
                <div class="border-top opacity-3 w-50 mx-auto"></div>
                <div class="flex flex-center flex-v-center pt-3 pb-5 mb-5">
                    <img src="__TEMPLATE_STATIC__/img/1.png" width="36" height="36">
                    <div class="mx-3 border-left border-white opacity-3 py-2"></div>
                    <img src="__TEMPLATE_STATIC__/img/2.png" width="36" height="36">
                    <div class="mx-3 border-left border-white opacity-3 py-2"></div>
                    <img src="__TEMPLATE_STATIC__/img/3.png" width="36" height="36">
                    <div class="mx-3 border-left border-white opacity-3 py-2"></div>
                    <img src="__TEMPLATE_STATIC__/img/4.png" width="36" height="36">
                    <div class="mx-3 border-left border-white opacity-3 py-2"></div>
                    <img src="__TEMPLATE_STATIC__/img/5.png" width="36" height="36">
                </div>
                <div class="py-5 flex flex-v-center">
                    {empty name="IosData"}
                    <a href="javascript:void(0);" class="down-btn down-not">
                        <img src="__TEMPLATE_STATIC__/img/iPhone.png">
                        <span>iPhone 下载</span>
                    </a>
                    {else/}
                    <a href="{$IosData.ios_url}" class="down-btn"
                    target="_blank">
                        <img src="__TEMPLATE_STATIC__/img/iPhone.png">
                        <span>iPhone 下载</span>
                    </a>
                    {/empty}
                    <div class="mx-3"></div>
                    {empty name="AndroidData"}
                    <a href="javascript:void(0);" class="down-btn down-not">
                        <img src="__TEMPLATE_STATIC__/img/Android.png">
                        <span>Android 下载</span>
                    </a>
                    {else/}
                    <a href="{xycms:web name='imgurl'/}{$AndroidData.path}" class="down-btn"
                    target="_blank">
                        <img src="__TEMPLATE_STATIC__/img/Android.png">
                        <span>Android 下载</span>
                    </a>
                    {/empty}
                </div>
            </div>
            <div class="flex-1 position-relative">
                <div class="down-qrcode-bg text-center wrap flex-v-center flex-center">
                    <div style="padding-right: 26px;">
                        <img src="{xycms:web name='url'/}/qrcode/appdown" alt="" height="144">
                        <div class="small text-A6ABBE">下载{xycms:web name="name"/}APP</div>
                        <div class="text-4E5470 pt-1">扫一扫</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-F6F6F8">
        <div class="container-xl flex flex-center py-5 flex-v-center">
            <div>
                <img src="__TEMPLATE_STATIC__/img/Artwork.png" width="700" height="500">
            </div>
            <div class="flex-1">
                <h1 class="text-4E5470 pb-4">{xycms:web name="name"/}</h1>
                <div class="text-A6ABBE h4 pb-2">用聊天方式找工作</div>
                <div class="text-A6ABBE h4">与老板HR面对面聊</div>
            </div>
        </div>
    </div>
    <div>
        <div class="container-xl flex flex-center py-5 flex-v-center">
            <div class="flex-1 pl-5">
                <h1 class="text-4E5470 pb-4">直接/DIRECT</h1>
                <div class="text-A6ABBE h4 pb-2">5秒投递简历，快速找到工作</div>
                <div class="text-A6ABBE h4">与老板HR面对面找工作，就是快</div>
            </div>
            <div>
                <img src="__TEMPLATE_STATIC__/img/Artwork-1.png" width="700" height="500">
            </div>
        </div>
    </div>
    <div class="bg-F6F6F8">
        <div class="container-xl flex flex-center py-5 flex-v-center">
            <div>
                <img src="__TEMPLATE_STATIC__/img/Artwork-2.png" width="700" height="500">
            </div>
            <div class="flex-1">
                <h1 class="text-4E5470 pb-4">名企/FAMOUS COMPANY</h1>
                <div class="text-A6ABBE h4">各行各业著名公司都在用{xycms:web name="name"/}招人</div>
            </div>
        </div>
    </div>
    <div>
        <div class="container-xl flex flex-center py-5 flex-v-center">
            <div class="flex-1 pl-5">
                <h1 class="text-4E5470 pb-4">高薪/HIGH SALARY</h1>
                <div class="text-A6ABBE h4 pb-2">除了面对面聊工作之外</div>
                <div class="text-A6ABBE h4">老板们会用客观的薪资表现招聘的诚意</div>
            </div>
            <div>
                <img src="__TEMPLATE_STATIC__/img/Artwork-3.png" width="700" height="500">
            </div>
        </div>
    </div>
    <div class="bg-F6F6F8">
        <div class="container-xl pb-5">
            <div class="swiper-slide bg-F5F7F9">
                <div class="py-5">
                    {notempty name="Company"}
                    <div class="py-5 text-center">
                        <el-divider class="w-50 mx-auto mb-5">他们一直在用</el-divider>
                        <div class="h3 text-A6ABBE">超500+企业加入我们</div>
                    </div>
                    <div class="swiper-container company-list mt-5">
                        <div class="swiper-wrapper">
                        {volist name="Company" id="v"}
                            <div class="swiper-slide text-v-center">
                                <img src="{$v.logo}" alt="{$v.title}" 
                                height="120" width="120" class="rounded-xl bg-white">
                            </div>
                        {/volist}
                        </div>
                        <div class="swiper-button-next swiper-button-gray"></div>
                        <div class="swiper-button-prev swiper-button-gray"></div>
                    </div>
                    {/notempty}
                </div>
            </div>
        </div>
    </div>
    {include file="module/footer"/}
</div>
<div class="mobile-show">
    <div class="mobile-bg text-center text-white">
        <div class="pt-5 pb-3">
            <img src="{xycms:web name='icon'/}" alt="" width="13%" class="rounded-xl bg-white">
        </div>
        <h4>求职更轻松 · 招聘更简单</h4>
        <h6 class="opacity-7">全新UI体验 , 轻轻松松找工作</h6>
    </div>
    <div class="pt-5 text-center w-50 mx-auto">
        {switch $device}
            {case android}
            {empty name="AndroidData"}
            <a href="javascript:void(0);" class="down-btn-blue down-blue-not flex flex-v-center">
                <img src="__TEMPLATE_STATIC__/img/Android.png" height="15">
                <span>Android 下载</span>
            </a>
            {else/}
            <a href="{xycms:web name='imgurl'/}{$AndroidData.path}" class="down-btn-blue flex flex-v-center"
            target="_blank">
                <img src="__TEMPLATE_STATIC__/img/Android.png" height="15">
                <span>Android 下载</span>
            </a>
            {/empty}
            {/case}
            {case ios}
            {empty name="IosData"}
            <a href="javascript:void(0);" class="down-btn-blue down-blue-not flex flex-v-center">
                <img src="__TEMPLATE_STATIC__/img/iPhone.png" height="15">
                <span class="pl-1">iPhone 下载</span>
            </a>
            {else/}
            <a href="{$IosData.ios_url}" class="down-btn-blue flex flex-v-center"
            target="_blank">
                <img src="__TEMPLATE_STATIC__/img/iPhone.png" height="15">
                <span>iPhone 下载</span>
            </a>
            {/empty}
            {/case}
        {/switch}
    </div>
</div>
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Swiper/swiper-bundle.min.js"}
{js href="__PLUGIN_SRC__/Swiper/swiper.animate1.0.3.min.js"}
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            view:XYBase.view,
            loginTabs:XYBase.loginTabs,
            userInfo:UserInfo,
            device:'{$device}',
            is_wx:{$is_wx},
        },
        watch:{
            view:XYBase.viewWatch,
            loginTabs:XYBase.loginTabsWatch,
            userInfo:{
                handler(val,oldVal){
                    if (val.id) {
                        window.location.reload();
                    }
                },
                deep:true
            },
        },
        created(){
            XYBase.created(this);
        },
        methods:XYBase.methods({
        })
    });
    {notempty name="Company"}
    var swiper = new Swiper('.company-list', {
        autoplay:true,
        loop: true,
        speed: 1000,
        slidesPerView: 6,
        spaceBetween: 30,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    {/notempty}
</script>
{/block}